<template>
	<view class="info-layout">
		<TopBar title="缴费记录" />
		<view class="container">
			<view class="car-name">
				<view class="left-group">
				<view class="icon"></view>
				<view class="title">
					苏E<text class="dot"></text>1234
				</view>
				</view>
				<view class="right-group">缴费成功</view>
			</view>
		  <view class="info">
		  <view class="car-info">
			  <view class="name">车场订单号</view>
			  <view class="value">0333222224000</view>
		  </view>
		  
		  <view class="car-info">
		  			  <view class="name">车场名称</view>
		  			  <view class="value">科技园停车场</view>
		  </view>
		  
		  <view class="car-info">
		  			  <view class="name">入场时间</view>
		  			  <view class="value">2022-08-08 10:24:02</view>
		  </view>
		<view class="car-info">
					  <view class="name">停车时长</view>
					  <view class="value">3小时</view>
		</view>
		
		<view class="car-info">
					  <view class="name">支付时间</view>
					  <view class="value">2022-08-08 13:24:02</view>
		</view>
		
		<view class="car-info">
					  <view class="name">实付金额</view>
					  <view class="value" style="color: blue;">￥15.00</view>
		</view>
		<view class="car-info">
					  <view class="name">付款方式</view>
					  <view class="value">微信</view>
		</view>
		  </view>
		</view>
	</view>
</template>

<script setup>
	import TopBar from '../../component/topbar.vue'
	//判断是否登录，没有就跳转登录页面
	const token = uni.getStorageSync('token')
	if(token === ''){
		uni.reLaunch({
			url:'/pages/login/login',
		})
	}
</script>

<style lang="less">
	.info-layout {
		.container {
			margin-top: 16rpx;
			.car-name {
				height: 96rpx;
				border-bottom: 2px solid #F1EEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 32rpx;
               .left-group{
				   display: flex;
				   justify-content: center;
				   align-items: center;
				.icon {
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					border: 2rpx solid #0680FE;
				}

				.title {
					width: 144rpx;
					height: 48rpx;
					background: #F5F5F5;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					display: flex;
                    align-items: center;
					justify-content: center;
				font-size: 28rpx;
					.dot{
						width: 4rpx;
						height: 4rpx;
						background: #D9D9D9;
						border-radius: 4rpx 4rpx 4rpx 4rpx;

					}
				}
			}
			.right-group{
				width: 112rpx;
				height: 28rpx;
				font-family:'Source Han Sans CN, Source Han Sans CN' ;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.info{
			margin-top: 32rpx;

		.car-info{
			
			margin: 28rpx 64rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 28rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: left;
				width: 140rpx;
				height: 28rpx;
			}
			.value{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
			}
		}
	}
	}
	}
</style>